<template>
  <div class="pd-20">
      <van-tabs type="card" color="#1989fa">
        <van-tab v-for="tab in tabMenus" :title="tab" :key="tab">
          <div
            class="tab-content"
            v-for="(content, i) in loveWords[tab]"
            :key="i"
          >
            <div @click="copyWord(`${content}`)">
              {{ i + 1 }}: {{ content }}
            </div>
          </div>
        </van-tab>
      </van-tabs>
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item v-for="item in menus" :title="item" :key="item">
        <div v-for="(dialog, i) in dialogs[item]" class="tab-dialog" :key="i">
          <div @click="copyWord(`${dialog}`)">
            {{ dialog }}
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import { loveWords, dialogs } from "../data/data";
import { copyWord } from "../utils/copy";
export default {
  data() {
    return {
      loveWords,
      dialogs,
      activeNames: ["1"],
    };
  },
  computed: {
    tabMenus() {
      return Object.keys(this.loveWords);
    },
    menus() {
      return Object.keys(this.dialogs);
    },
  },
  methods: {
    copyWord(words) {
      return copyWord(words);
    },
  },
};
</script>

